<template>
  <div class="left-bar">
    <div class="bar-item file" :class="active === 0 ? 'active' : null" @click="leftBarActive(0)">文件</div>
    <div class="bar-item file" :class="active === 1 ? 'active' : null" @click="leftBarActive(1)">搜索</div>
    <div class="bar-item file" :class="active === 2 ? 'active' : null" @click="leftBarActive(2)">版本</div>
    <div class="bar-item file" :class="active === 3 ? 'active' : null" @click="leftBarActive(3)">调试</div>
    <div class="bar-item file" :class="active === 4 ? 'active' : null" @click="leftBarActive(4)">扩展</div>
  </div>
</template>

<script setup lang="ts">
import { ref, Ref } from 'vue'
import request from '../utils/request'
const active: Ref<number> = ref(0)

const leftBarActive = (val: number) => {
  request({
    url: '/demo',
    method: 'get'
  }).then((res) => {
    console.log(res)
  })

  active.value = val
}
</script>

<style lang="scss" scoped>
.left-bar {
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgb(88, 112, 127);
  font-size: 1em;
  height: 100vh;
  min-width: 60px;
  max-width: 60px;
  width: 60px;
  background: rgb(51, 51, 51);

  .bar-item {
    width: 100%;
    text-align: center;
    padding: 15px 0;
    cursor: pointer;
    position: relative;
    transition: 0.2s;

    &.active {
      color: #f9f9f9;
    }

    &.active:after {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      width: 2px;
      height: 100%;
      background: #f9f9f9;
    }
  }
}
</style>
